<template>
  <div class="home">
    <router-link :to="{ name: 'Home' }">home</router-link> |
    <router-link :to="{ name: 'About' }">about</router-link>
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <fa :boo="boo" :coo="coo" :doo="doo" @changeBoo="inHome"></fa>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import fa from '@/components/a.vue'

export default {
  name: 'Home',
  data() {
    return {
      boo: 'hello',
      coo: 'world',
      doo: 'doen'
    }
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route: {
      handler(to) {
        console.log(this.$router)

        console.log(to)
        // console.log('from: ' + from)
      },
      immediate: true
    }
  },
  methods: {
    inHome(value) {
      this.boo = value
    }
  },
  beforeMount() {
    // console.log(this)
  },
  components: {
    // HelloWorld
    fa
  }
}
</script>
